import React from 'react';
import {inject, observer} from 'mobx-react';
import * as mobx from 'mobx';
import {Button, Icon, Row, Col, Select, message,Checkbox} from 'antd';
const Option = Select.Option;
import {
    WeaLocaleProvider,
    WeaDialog,
    WeaRightMenu,
    WeaMoreButton,
    WeaFormItem,
    WeaSelect,
    WeaInput,
    WeaBrowser,
    WeaUpload,
    WeaColorPicker,
    WeaCheckbox,
    WeaSearchGroup,
    WeaTools,
    WeaInputNumber
} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import './style/';
import {WeaPortalShare,WeaMaterialLib} from 'weaPortalPublic';
import EField_New from "../../../portal/elements/components/common/setting_new/content/base/EField_New";
class Add extends React.Component{

    state = {
        id:'',
        setting:{
            title:'',
            showType:'',
            doc:'',
            docReplaceData:'',
            imgWidth:'120',
            imgWidthType:'1',
            imgHeight:'108',
            imgHeightType:'1',
            autoHeight:false
        },
        companynewsId:'',
        eFieldNewDataSource:'',
        eFieldNewUsedKeys:'',
        eFieldNewVisible:false
    }



    setStateData = (stateData)=>{
        let setting = Object.assign({},this.state.setting,stateData);
        this.setState({
            setting
        })
    }

    onCancel = ()=>{
        this.setState({
            id:"",
            setting:{},
            companynewsId:''
        })
        this.props.setStateData({
            addVisiable:false,
            setId:-1
        })
    }

    onOk = ()=>{
        const {id,setting,companynewsId} = this.state
        WeaTools.callApi('/api/portal/customCompanyNews/saveCompanyNewsItem', 'POST', {"json":JSON.stringify({id:id,setting:JSON.stringify(setting),companynewsId:companynewsId})}).then((result) => {
            if (result.status == true) {
                this.props.onLoad()
                this.onCancel()
                message.success(getLabel(83551, '保存成功！'), 3);

            } else {
                message.error(getLabel(84544, '保存失败！'), 3);
            }
        });
    }



    componentWillReceiveProps(nextProps){
        const setId = nextProps.setId
        const items = nextProps.data.items
        let item
        if(setId != -1){
            for(let i in items){
                if(items[i].id == setId ){
                    item = items[i]
                    continue
                }
            }
            this.setState({
                id : item.id,
                setting : item.setting,
                companynewsId:item.companynewsId,
                eFieldNewVisible:false
            })
        }else{
            this.setState({
                id : setId,
                setting : {
                    title:'',
                    showType:'1',
                    doc:'',
                    docReplaceData:'',
                    imgWidth:'120',
                    imgWidthType:'1',
                    imgHeight:'108',
                    imgHeightType:'1',
                    autoHeight:false
                },
                companynewsId:nextProps.data.id,
                eFieldNewVisible:false
            })
        }
    }



    getButtons() {
        let buttons = [];
        buttons.push(<Button type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        buttons.push(<Button type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }

    render (){
        const {title,showType,doc,docReplaceData,eFieldNewUsedKeys=[],imgWidth,imgWidthType,imgHeight,imgHeightType,autoHeight} = this.state.setting
        const {eFieldNewDataSource} = this.props.data
        const {visiable} = this.props




        let EFieldNew = <div></div>;
        const {eFieldNewVisible} = this.state
        if (eFieldNewVisible) {
            const eFieldNewProps = {
                eFieldNewDataSource: _.cloneDeep(eFieldNewDataSource),
                eFieldNewUsedKeys: _.cloneDeep(eFieldNewUsedKeys),
                onOk: (data) => {
                    this.setStateData({
                       /* eFieldNewDataSource: _.cloneDeep(data.eFieldNewDataSource),*/
                        eFieldNewUsedKeys: _.cloneDeep(data.eFieldNewUsedKeys),

                    });
                    this.setState(function(state,props){
                        return {
                            eFieldNewVisible:false
                        }
                    })
                },
                onCancel: () => {
                    this.setState({
                        eFieldNewVisible: false
                    });
                }
            };
            EFieldNew = <EField_New {...eFieldNewProps}/>
        }
        const eFieldNewUsedNames = [];
        for (let i = 0; i < eFieldNewUsedKeys.length; i++) {
            for (let j = 0 ; j < eFieldNewDataSource.length; j++) {
                if (eFieldNewUsedKeys[i] == eFieldNewDataSource[j].key) {
                    eFieldNewUsedNames.push(eFieldNewDataSource[j].name);
                }
            }
        }
        return (
            <WeaDialog
                className="portal-esetting-dialog"
                visible={visiable}
                title={getLabel(19480, '内容设置')}
                icon="icon-coms-portal"
                iconBgcolor='#1a57a0'
                style={{width: 660, height: 507}}
                hasScroll={true}
                buttons={this.getButtons()}
                onCancel={this.onCancel}
            >
                <WeaSearchGroup title={getLabel(33396, '设置项')} needTigger={true} showGroup={true}>
                    <WeaFormItem label={getLabel(24986, '标题')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaInput value={title} viewAttr={2} onChange={value => this.setStateData({title: value})}/>
                    </WeaFormItem>
                    {/*<WeaFormItem label={getLabel(23784, '文档置顶')} labelCol={{span: 6}} wrapperCol={{span: 16}}>*/}
                        {/*<WeaBrowser*/}
                            {/*type={37}*/}
                            {/*isSingle={false}*/}
                            {/*replaceDatas={topDocReplaceData}*/}
                            {/*onChange={(ids, names, datas) => this.setStateData({topDoc: ids, topDocReplaceData: datas})}*/}
                            {/*layout={document.body}*/}
                        {/*/>*/}
                    {/*</WeaFormItem>*/}
                    <WeaFormItem  label={getLabel(21653, '显示方式')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <div style={{display: 'inline-block' }}>
                            <Select ref="fillStyleSelect" size='large'
                                    className="eStyle-7 wea-select eeStyle-7"
                                    dropdownClassName="droptwo"
                                    dropdownMatchSelectWidth={true}
                                    onChange={value => {
                                        this.setStateData({
                                            showType: value,
                                        });
                                    }} value={showType}>
                                <Option className={'portal-imgSlide-images-option'} value="1">
                                    <div className="portal-imgSlide-images-style-content-type"  title={getLabel(19525, '列表式')}>
                                        {/*<img className="portal-imgSlide-images-style-content-image" style={{marginRight: '15px',verticalAlign:'middle'}} src="/spa/portal/images/news/listStyle.png" alt=""/>*/}
                                        <span className="portal-imgSlide-images-style-content-span" style={{verticalAlign:'middle'}}>{getLabel(19525, '列表式')}</span>
                                    </div>
                                </Option>
                                <Option className={'portal-imgSlide-images-option'} value="2">
                                    <div className="portal-imgSlide-images-style-content-type" title={getLabel(387382,"列表式2")}>
                                        {/*<img className="portal-imgSlide-images-style-content-image" style={{marginRight: '15px',verticalAlign:'middle'}} src="/spa/portal/images/news/listStyle2.png" alt=""/>*/}
                                        <span className="portal-imgSlide-images-style-content-span" style={{verticalAlign:'middle'}}>{getLabel(387382,"列表式2")}</span>
                                    </div>
                                </Option>
                                <Option className={'portal-imgSlide-images-option'} value="3">
                                    <div className="portal-imgSlide-images-style-content-type" title={getLabel(82759, '左图式')}>
                                        {/*<img className="portal-imgSlide-images-style-content-image" style={{marginRight: '15px',verticalAlign:'middle'}} src="/spa/portal/images/news/leftPictureStyle.png" alt=""/>*/}
                                        <span className="portal-imgSlide-images-style-content-span" style={{verticalAlign:'middle'}}>{getLabel(82759, '左图式')}</span>
                                    </div>
                                </Option>
                            </Select>
                        </div>

                    </WeaFormItem>
                    {
                        showType == 2 || showType== 3 ?(
                            <WeaFormItem label={getLabel(386551, '缩略图设置')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                                <ul style={{lineHeight: '29px'}}>
                                    <li style={{display: 'inline-block'}}>
                                    <span>
                                            <span>{getLabel(386529, '宽度：')}</span>
                                            <div style={{display:'inline-block','width':'70px','vertical-align':'middle'}}>
                                                <WeaInputNumber
                                                    value={imgWidth}
                                                    style={{width: '60px', marginRight: '8px', marginBottom: '4px'}}
                                                    onChange={value => this.setStateData({'imgWidth': value})}
                                                />
                                            </div>
                                            <div style={{display:'inline-block','width':'50px'}}>
                                                <WeaSelect
                                                    className="portal-news-picture"
                                                    value={imgWidthType}
                                                    onChange={value => this.setStateData( {'imgWidthType': value })}
                                                    options={[
                                                        {
                                                            key: "1",
                                                            selected: true,
                                                            showname: "px"
                                                        },
                                                        {
                                                            key: "2",
                                                            selected: false,
                                                            showname: "%"
                                                        }
                                                    ]}
                                                    style={{width: '50px', marginRight: '8px', marginBottom: '4px'}}
                                                />
                                            </div>

                                        {
                                            autoHeight ==false ?
                                                (
                                                <span style={{marginLeft: '20px','vertical-align':'middle'}}>
                                                    <span>{getLabel(386530, '高度：')}</span>
                                                    <div style={{display:'inline-block','width':'70px','vertical-align':'middle'}}>
                                                        <WeaInputNumber
                                                            value={imgHeight}
                                                            style={{width: '60px', marginRight: '8px', marginBottom: '4px'}}
                                                            onChange={value => this.setStateData( {'imgHeight': value})}
                                                        />
                                                    </div>
                                                    <div style={{display:'inline-block','width':'50px'}}>
                                                        <WeaSelect
                                                            className="portal-news-picture"
                                                            value={imgHeightType }
                                                            onChange={value => this.setStateData({'imgHeightType': value})}
                                                            options={[
                                                                {
                                                                    key: "1",
                                                                    selected: true,
                                                                    showname: "px"
                                                                },
                                                                {
                                                                    key: "2",
                                                                    selected: false,
                                                                    showname: "%"
                                                                }
                                                            ]}
                                                            style={{width: '50px', marginRight: '8px', marginBottom: '4px'}}
                                                        />
                                                    </div>
                                                </span>
                                    )
                                    :""

                            }
                            <Checkbox
                                style={{marginLeft: '0px'}}
                                checked={autoHeight}
                                onChange={e => this.setStateData({'autoHeight':e.target.checked})}
                            >{getLabel(22494, '自适应高度')}</Checkbox>
                        </span>
                                    </li>
                                </ul>
                            </WeaFormItem>
                        ):""
                    }

                    {
                        showType == '6' || showType == '7' ? ''
                            : <WeaFormItem label={getLabel(19495, '显示字段')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                                {EFieldNew}
                                <div style={{height: '100%', lineHeight: '23px'}}>
                                    <i className="icon-coms-Flow-setting portal-esetting-btn"
                                       style={{position: "relative", zIndex: "12",top:5}}
                                       onClick={() => this.setState({eFieldNewVisible: true})}/>
                                    <div
                                        title={eFieldNewUsedNames.join('，')} style={{marginTop:-18,"-webkit-line-clamp": 2,
                                        "-webkit-box-orient": "vertical",    "cursor": "pointer"}}>&nbsp;&nbsp;&nbsp;&nbsp;{eFieldNewUsedNames.join('，')}</div>
                                </div>
                            </WeaFormItem>
                    }

                </WeaSearchGroup>
                <WeaSearchGroup title={getLabel(127253, '来源设置')} showGroup={true} center={true}>
                    <WeaFormItem label={getLabel(16398, '文档目录')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaBrowser
                            title={getLabel(386382,"请选择")}
                            type="doccategory"
                            replaceDatas={ docReplaceData|| []}
                            isSingle={false}
                            onChange={(ids, names, datas) => {
                                this.setStateData({doc: ids, docReplaceData: datas})
                            }}
                            layout={document.body}
                        />
                    </WeaFormItem>

                </WeaSearchGroup>
            </WeaDialog>
        )
    }
}
export default Add;